<script lang="ts" setup>
import ThemeScreenFull from './ThemeScreenFull.vue'
import Breadcrumb from "./Breadcrumb.vue"
import Hamburger from "./Hamburger.vue"
import HeaderSearch from "./HeaderSearch.vue"
import ThemeSwitch from "./ThemeSwitch.vue"
import MessageNotice from "./MessageNotice.vue"
import UserBar from "./UserBar.vue"


import {useAppStore} from "@/store/modules/app"
import {useSettingsStore} from "@/store/modules/setting"
import {useUserStore} from "@/store/modules/user"
import {useTheme} from "@/hooks/useTheme"
import {useDisplay} from "vuetify"

const {activeThemeName} = useTheme()
const {mobile} = useDisplay()


const router = useRouter()
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const userStore = useUserStore()

const sidebar = computed(() => {
  return appStore.sidebar
})
const showNotify = computed(() => {
  return settingsStore.showNotify
})
const showThemeSwitch = computed(() => {
  return settingsStore.showThemeSwitch
})
const showScreenfull = computed(() => {
  return settingsStore.showScreenfull && !mobile.value
})

const toggleSidebar = () => {
  appStore.toggleSidebar(false)
}
const logout = () => {
  userStore.logout()
  router.push("/login")
}


</script>

<template>
  <v-toolbar dark prominent :theme="activeThemeName" class="navigation-bar">
    <Hamburger :is-active="sidebar.opened" @toggle-click="toggleSidebar"/>
    <Breadcrumb class="breadcrumb"/>
    <v-spacer></v-spacer>
    <!-- <HeaderSearch/> 暂时不需要-ln -->
    <v-spacer></v-spacer>
    <ThemeScreenFull v-if="showScreenfull"/>
    <ThemeSwitch v-if="showThemeSwitch"/>
    <MessageNotice v-if="showNotify"/>
    <UserBar/>
    <v-btn icon @click="logout">
      <v-icon>mdi-export</v-icon>
      <v-tooltip activator="parent" location="bottom">退出</v-tooltip>
    </v-btn>
  </v-toolbar>
</template>

<style lang="scss" scoped>
//

.navigation-bar {
  height: var(--v3-navigationbar-height);
  overflow: hidden;
  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !important;
}
</style>
